<template>
  <div class="notify-container">
    <div class="header">
    <van-nav-bar  >
      <template #title>
        <p style="color: var(--gh-primary); font-family: '宋体';font-size: 18px;">消息</p>
      </template>
      <template #right>
        <div ref="dropdown" class="dropdown" @click="toggleDropdown">
          <van-icon name="plus" size="18" />
        </div>
        <transition name="dropdown">
          <div v-if="showDropdown" class="dropdown-menu" @click.stop>
            <ul>
              <li> <van-icon name="cluster-o" size=18 /><span>发起群聊</span></li>
              <li> <van-icon name="contact" size="18" /> <span>添加好友</span></li>
              <li> <van-icon name="scan" size="18" /> <span> 扫一扫</span> </li>
            </ul>
          </div>
        </transition>
      </template>
    </van-nav-bar>
    <van-search
        v-model="value"
        placeholder="搜索"
       input-align="center"
     />
   </div>
   <div class="user-list">

    <div v-for="user in userList" :key="user.id" class="user-item" @click="goToChat(user)">
      <div class="left-box">
        <img :src="user.avatar" alt="avatar">
      </div>
      <div class="center-box">
        <div class="username">{{ user.username }}</div>
        <div class="user-text">{{ user.content }}</div>
      </div>
      <div class="right-box">
        <div class="user-time">{{ user.time }}</div>
        <gh-icon class="icon" :name="`notify-icon`" ></gh-icon>
         </div>
    </div>
    
   </div>

  </div>
</template>
  
<script setup>
import {ref,onMounted,onUnmounted} from "vue"
import {useRouter,useRoute} from 'vue-router'
import { Toast, Dialog } from 'vant';
import GhIcon from '../../components/gh-icon.vue'

//默认头像地址
const avatarUrl=ref('src/assets/avatar/1.jpg')

const value=ref('')



  // 模拟接收消息的逻辑，可以替换为实际的异步请求等

    const userList = ref([
      {
      id: 1,
      content: '各位同学们，大家好！',
      time: getCurrentTime(),
      username:'软件1204通知群',
      avatar:avatarUrl,
      },
      {
      id: 2,
      content: '今晚我要打呼噜！',
      time: getCurrentTime(),
      username:'庄梓炜',
      avatar:'src/assets/avatar/紫薇.jpg',
      },
      {
      id: 3,
      content: '您收到200w巨款',
      time: getCurrentTime(),
      username:'建设银行',
      avatar:'src/assets/avatar/建设银行.jpg',
      },
      {
      id: 4,
      content: '恭喜您成为我行亿万级别用户！',
      time: getCurrentTime(),
      username:'工商银行',
      avatar:'src/assets/avatar/工商银行.jpg',
      },
      {
      id: 5,
      content: '我校迎来130周年校庆！',
      time: getCurrentTime(),
      username:'广东海洋大学',
      avatar:'src/assets/avatar/海大.jpg',
      }
   ]
   );




function getCurrentTime() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
}

const goToChat=()=>{
  console.log('进入聊天')
}




//下拉框
const showDropdown = ref(false);
function toggleDropdown() {
  showDropdown.value = !showDropdown.value;
}
//处理点击空白处隐藏下拉框
function handleClickOutside(event) {
  const dropdown = document.querySelector(".dropdown");
  if (dropdown && !dropdown.contains(event.target)) {
    showDropdown.value = false;
  }
}
onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>



  <style lang="scss" scoped>
.notify-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 头部样式 */
  .header{
    .dropdown {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      width: 130px;
      /* padding: 8px 0; */
      background-color:var(--gh-text3);
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;

        li {
          display: flex;
          justify-content:flex-start;
          width: 100%;
          align-items: center;
          color: #fff;
          height: 40px;
          cursor: pointer;
          .van-icon{
            padding-left: 15px;
          }
          span{
            padding-left: 10px;
          }

          &:hover {
            background-color: var(--gh-text2);
          }
        }
      }
    }
    /* 下拉菜单动画 */
  .dropdown-enter-active {
    animation: dropdownEnter 0.3s ease;
  }
  
  .dropdown-leave-active {
    animation: dropdownLeave 0.2s ease;
  }
  
  @keyframes dropdownEnter {
    from {
      opacity: 0;
      transform: translateY(-50%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes dropdownLeave {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-50%);
    }
   }
  }
  .user-list {   
    padding: 5px;
    .user-item{
      margin-top: 2px;
      background: var(--gh-bg);
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid var(--gh-line);
      .left-box{
        margin-right: 10px;
        box-sizing: border-box;
        height: 50px;
        width: 50px;
        img{
           display: block;
           width: 100%;
           height: 100%;
         }
      }
      .center-box{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .username{
          font-weight: bold;
          overflow: hidden;
        }
        .user-text{
          margin-top: 10px;
          overflow: hidden;
        }
      }
      .right-box{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #aaa;
        font-size: 12px;
        .icon{
          margin-top: 10px;
        }
      }
   
    }
  }

}


  </style>